/* eslint-disable max-lines */
/* eslint-disable no-nested-ternary */
import React from 'react';
import moment from 'moment';
import * as api from '../api';
import routes from '.././routes';
import styles from '../style.css';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {ListTypeCL} from '../utils';
import FileUpload from './FileUpload';
import {createSelector} from 'reselect';
import {formatAmount} from '../../utils';
import WrappedInputVIN from './WrappedInputVIN';
import PartSelectPanel from './PartSelectPanel';
import {tableSearch, onSubmit} from '../actions';
import InputAmount from '../../common/InputAmount';
import TextInput from 'Shared/components/TextInput';
import {newOrUpdateOrderValidator} from './validator';
import WrappedSelect from '../../common/WrappedSelect';
import DutyUnitSelectPanel from './DutyUnitSelectPanel';
import SearchInput from 'Shared/components/SearchInput';
import ProductCategoryPanel from './ProductCategoryPanel';
import SearchSelect from 'Shared/components/SearchSelect';
import FuLiaoPartSelectPanel from './FuLiaoPartSelectPanel';
import {injectIntl, formatMessage, language} from '../intl';
import DateRangePicker from 'Shared/components/DateRangePicker';
import {isYesNo, vehicleCategory, dutyUnitType} from '../../Enum';
import LocalizeInputNumber from '../../common/LocalizeInputNumber';
import DealerSelectPanel from '../../common/DealerSelect/SelectEdit';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {Card, Button, Row, Col, Form, Table, Input, message, Checkbox, Spin} from 'antd';
import {FORM_OPTIONS, TABLE, FORM_OPTIONS_L, FORM_ROW_OPTIONS, PAGE, PAGINATION_OPTIONS,
    COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../../constants';
const FormItem = Form.Item;
const isTrueFlase = d => d === true ? 1 : 0;
const isYesNoList = isYesNo.toList(language);
const vehicleCategoryList = vehicleCategory.toList(language);
const widths = {
    width: '40%',
    textAlign: 'center'
};
export class IndexPanel extends React.PureComponent {
    state = {
        data: {
            isClaimPart: 0,
            isClaimAssist: 0,
            technologyActivityDate: [],
            startTime: '',
            endTime: ''
        },
        message: '',
        loading: false,
        vehicleData: {},
        showImport: false,
        isValidate: false,
        isFetching: false,
        currentCondition: {},
        pageIndex: PAGE.index,
        pageSize: PAGE.smallSize,
        showProductCategory: false,
        showSelectNewPanel: false,
        showSelectPartPanel: false,
        showDutyUnitCodePanl: false,
        showSupplierCodePanl: false,
        showSelectFuLiaoNewPanel: false,
    };
    componentDidMount() {
        if(this.props.id) {
            this.setState({loading: true});
            api.getDetail(this.props.id)
                .then(res => {
                    if(res.ok)
                        this.setState({
                            loading: false,
                            data: Object.assign({}, res.data.details, {
                                isClaimPart: isTrueFlase(res.data.details.isClaimPart),
                                isClaimAssist: isTrueFlase(res.data.details.isClaimAssist),
                                details: res.data.details.noIsTechnologyActivityMaterialList,
                                technologyActivityMaterial: res.data.details.isTechnologyActivityMaterialList,
                                technologyActivityDate: res.data.details.startTime ? [res.data.details.startTime, res.data.details.endTime] : []
                            }),
                        });
                    else
                        this.setState(({
                            loading: false
                        }));
                });
        }
    }
    handleFilterChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    dateHandleFilterChange = value => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                technologyActivityDate: value,
                startTime: value.length > 0 ? moment(value[0]).toISOString() : '',
                endTime: value.length > 0 ? moment(value[1]).toISOString() : '',
            }),
            hasOperat: true
        });
    }
    rolloutHandleFilterChange = value => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                rolloutDate: value,
                beginRolloutDate: value.length > 0 ? moment(value[0]).toISOString() : '',
                endRolloutDate: value.length > 0 ? moment(value[1]).toISOString() : '',
            }),
            hasOperat: true
        });
    }
    showSupplierCode = () => {
        this.setState({
            showSupplierCodePanl: true,
            hasOperat: true
        });
    }
    showDutyUnitCode = () => {
        this.setState({
            showDutyUnitCodePanl: true,
            hasOperat: true
        });
    }
    // eslint-disable-next-line react/sort-comp
    onSelectShowSupplierCode = conditions => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                supplierId: conditions.id,
                supplierCode: conditions.code,
                supplierName: conditions.name,
            }),
            showSupplierCodePanl: false,
            hasOperat: true
        });
    }
    onSelectShowDutyUnitCode = conditions => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                dutyUnitId: conditions.id,
                dutyUnitCode: conditions.code,
                dutyUnitName: conditions.name,
            }),
            showDutyUnitCodePanl: false,
            hasOperat: true
        });
    }
    onSelectDealer = conditions => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                dealerId: conditions.id,
                dealerCode: conditions.code,
                dealerName: conditions.name,
            }),
            hasOperat: true
        });
    }
    onSelectProduct = conditions => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                productCategoryId: conditions.id,
                productCategoryCode: conditions.code,
                productCategoryName: conditions.name,
            }),
            showProductCategory: false,
            hasOperat: true
        });
    }
    onSearchSupplierCode = value =>
        api.getDutyUnitsQuickly({
            filter: value,
            type: dutyUnitType.索赔供应商,
        })
            .then(res => {
                const data = res.data;
                if(data)
                    return data.content;
            });
    onSearchDutyUnitCode= value =>
        api.getDutyUnitsQuickly({
            filter: value,
            type: dutyUnitType.责任单位,
        })
            .then(res => {
                const data = res.data;
                if(data)
                    return data.content;
            });
    onChangeUpload = value => {
        const {data} = this.state;
        const attachments = data.attachments || [];
        attachments.push(value[0]);
        this.setState({
            data: {
                ...data,
                attachments
            },
        });
    }
    removeFilePath = file => {
        const data = this.state.data;
        const index = data.attachments.findIndex(item => item.fileId === file.id);
        if(index === -1)
            return null;
        const attachments = data.attachments || [];
        attachments.splice(index, 1);
        this.setState({
            data: {
                ...data,
                attachments
            },
            hasOperat: true,
        });
    }
    onSelectParts = records => {
        const {data} = this.state;
        const parts = data.details || [];
        // eslint-disable-next-line array-callback-return
        records.map(d => {
            const index = parts.findIndex(v => v.usedPartId === d.id);
            if(index === -1)
                parts.push({
                    usedPartId: d.id,
                    quantity: 1,
                    isCaused: false,
                    usedPartName: d.name,
                    usedPartCode: d.code,
                });
        });
        this.setState({
            data: Object.assign({}, this.state.data, {
                details: [...parts]
            }),
            hasOperat: true,
            showSelectPartPanel: false
        });
    };
    onSelectNews = records => {
        const {data, partId} = this.state;
        this.setState({
            data: Object.assign({}, this.state.data, {
                details: data.details.map(d => {
                    if(d.usedPartId === partId)
                        return Object.assign({}, d, {
                            newPartId: records.id,
                            newPartCode: records.code,
                            newPartName: records.name
                        });
                    return d;
                })
            }),
            showSelectNewPanel: false
        });
    };
    onSelectFuLiaoParts = records => {
        const {data} = this.state;
        const parts = data.technologyActivityMaterial || [];
        // eslint-disable-next-line array-callback-return
        records.map(d => {
            const index = parts.findIndex(v => v.usedPartId === d.id);
            if(index === -1)
                parts.push({
                    usedPartId: d.id,
                    quantity: 1,
                    unit: d.unit,
                    minQty: d.minQty,
                    price: d.price,
                    materialFee: d.price,
                    usedPartName: d.name,
                    usedPartCode: d.code,
                });
        });
        this.setState({
            data: Object.assign({}, this.state.data, {
                technologyActivityMaterial: [...parts]
            }),
            hasOperat: true,
            showSelectFuLiaoNewPanel: false
        });
    };
    onClicNewPart = () => {
        const {data} = this.state;
        const {initEnumData} = this.props;
        const dealerId = initEnumData.isDealerUser
            ? initEnumData.enterprise.dealerId : data.dealerId;
        if(!data.brandId)
            return message.warning(formatMessage({
                id: 'newPanel.message.brandId',
                defaultMessage: '请先选择品牌'
            }));
        if(!dealerId)
            return message.warning(formatMessage({
                id: 'newPanel.message.dealerId',
                defaultMessage: '请先选择总代'
            }));
        this.setState({showSelectPartPanel: true});
    }
    onClicfuliNewPart = () => {
        const {data} = this.state;
        const {initEnumData} = this.props;
        const dealerId = initEnumData.isDealerUser
            ? initEnumData.enterprise.dealerId : data.dealerId;
        if(!data.brandId)
            return message.warning(formatMessage({
                id: 'newPanel.message.brandId',
                defaultMessage: '请先选择品牌'
            }));
        if(!dealerId)
            return message.warning(formatMessage({
                id: 'newPanel.message.dealerId',
                defaultMessage: '请先选择总代'
            }));
        this.setState({showSelectFuLiaoNewPanel: true});
    }
    onUpdateQuantity = (quantity, id) => {
        const {data} = this.state;
        const details = data.details || [];
        this.setState({
            data: Object.assign({}, this.state.data, {
                details: details.map(d => {
                    if(d.usedPartId === id)
                        return Object.assign({}, d, {
                            quantity
                        });
                    return d;
                })
            }),
        });
    }
    onUpdateFuLiaoQuantity = (quantity, id) => {
        const {data} = this.state;
        const technologyActivityMaterial = data.technologyActivityMaterial || [];
        this.setState({
            data: Object.assign({}, this.state.data, {
                technologyActivityMaterial: technologyActivityMaterial.map(d => {
                    if(d.usedPartId === id)
                        return Object.assign({}, d, {
                            quantity,
                            materialFee: d.price * quantity
                        });
                    return d;
                })
            }),
        });
    }
    onCausedCheck = e => {
        const {data} = this.state;
        const details = data.details || [];
        const usedPart = details.findIndex(v => v.isCaused === true);
        if(e.target.checked === true && usedPart !== -1)
            return message.warn(formatMessage({
                id: 'newPanel.message.isCaused',
                defaultMessage: '已经存在主因件，请先取消已有的主因件！'
            }));
        this.setState({
            data: Object.assign({}, this.state.data, {
                details: details.map(d => {
                    if(d.usedPartId === e.target.id)
                        return Object.assign({}, d, {
                            isCaused: e.target.checked
                        });
                    return d;
                })
            }),
        });
    }
    onQuery = condition => {
        this.setState({isFetching: true});
        api.getVehicleData(condition)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        message: '',
                        vehicleData: res.data,
                        currentCondition: condition
                    });
                else
                    this.setState({
                        isFetching: false,
                        vehicleData: [],
                        message: res.message
                    });
            });
    }
    onPageIndexChange = current => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = current - 1;
        this.onQuery(condition);
    }

    onPageSizeChange = (current, pageSize) => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = PAGE.index;
        condition.pageSize = pageSize;
        this.onQuery(condition);
        this.setState({
            pageSize
        });
    }
    onClickReset = () => {
        this.setState({
            data: Object.assign({}, this.state.data, {
                wholesaleDealerId: '',
                productCategoryId: '',
                productCategoryCode: '',
                productCategoryName: ''
            }),
        });
    }
    onClickSearchBtn = () => {
        const {data} = this.state;
        const {initEnumData} = this.props;
        const wholesaleDealerId = initEnumData.isDealerUser ? initEnumData.enterprise.dealerId : data.dealerId;
        if(!(data.productCategoryId || (data.beginVIN && data.endVIN) || data.rolloutDate)) {
            message.warning(`${formatMessage({
                id: 'validator.message.wholesaleDealerId',
                defaultMessage: '车辆查询条件必填一个'
            })}`);
            return;
        }
        const condition = {
            wholesaleDealerId,
            productCategoryCode: data.productCategoryCode,
            beginRolloutDate: data.beginRolloutDate,
            endRolloutDate: data.endRolloutDate,
            beginVIN: data.beginVIN,
            endVIN: data.endVIN,
            pageIndex: PAGE.index,
            pageSize: this.state.pageSize,
            sortField: this.state.sortField,
            isDesc: this.state.isDesc
        };
        this.onQuery(condition);
    }
    onSubmit = () => {
        const {data} = this.state;
        const {initEnumData} = this.props;
        const dealerId = initEnumData.isDealerUser
            ? initEnumData.enterprise.dealerId : data.dealerId;
        const isValid = newOrUpdateOrderValidator(data, dealerId);
        if(!isValid) {
            this.setState({
                isValidate: true
            });
            return;
        }
        this.setState({loading: true});
        this.props.onSubmit(data, dealerId).then(res => {
            if(res.success)
                this.props.successReturn();
            this.setState({loading: false});
        });
    };

    render() {
        const {data, vehicleData} = this.state;
        const {onCancel, initEnumData, loading} = this.props;
        const {pageIndex, pageSize} = this.state.currentCondition;
        const currentSelectRowkeys = data.details ? data.details.map(item => item.usedPartId) : [];
        const currentFuLiaoSelectRowkeys = data.technologyActivityMaterial ? data.technologyActivityMaterial.map(item => item.usedPartId) : [];
        const did = initEnumData.enterprise && initEnumData.isDealerUser ? initEnumData.enterprise.dealerId : data.dealerId;
        const dealerInfo = data.dealerId ? {
            id: data.dealerId,
            code: data.dealerCode,
            name: data.dealerName,
        } : null;
        const supplierInfo = data.supplierId ? {
            id: data.supplierId,
            code: data.supplierCode,
            name: data.supplierName,
        } : null;
        const dutyUnitInfo = data.dutyUnitId ? {
            id: data.dutyUnitId,
            code: data.dutyUnitCode,
            name: data.dutyUnitName,
        } : null;
        const pagination = {
            total: vehicleData.totalElements,
            current: pageIndex + 1,
            pageSize,
            onShowSizeChange: this.onPageSizeChange,
            onChange: this.onPageIndexChange,
            ...PAGINATION_OPTIONS
        };
        const columns = [
            {
                title: formatMessage({
                    id: 'newPanel.details.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.newPartCode',
                    defaultMessage: '新件编号'
                }),
                dataIndex: 'newPartCode',
                width: 200,
                render: (text, record) => <SearchInput
                    value={text}
                    id={record.usedPartId}
                    onClickSearchBtn={() => this.setState({
                        partId: record.usedPartId,
                        showSelectNewPanel: true
                    })}/>
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.newPartName',
                    defaultMessage: '新件名称'
                }),
                dataIndex: 'newPartName'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                width: 200,
                render: (text, record) => {
                    const validate = (!text || text === undefined) && text !== 0 ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber min={0}
                                id={record.usedPartId}
                                precision={0}
                                value={text} onBlur={this.onUpdateQuantity}/>
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.isCaused',
                    defaultMessage: '是否主因件'
                }),
                dataIndex: 'isCaused',
                render: (text, record) => (
                    <Checkbox
                        checked={record.isCaused}
                        name="isCaused"
                        id={record.usedPartId}
                        value={text}
                        onChange={this.onCausedCheck}>
                    </Checkbox>
                )
            },
        ];
        const fuliaoColumns = [
            {
                title: formatMessage({
                    id: 'newPanel.details.fuliaoPartCode',
                    defaultMessage: '辅料编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.fuliaoPartName',
                    defaultMessage: '辅料名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                width: 200,
                render: (text, record) => {
                    const validate = (!text || text === undefined) && text !== 0 ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber min={0}
                                id={record.usedPartId}
                                precision={0}
                                value={text} onBlur={this.onUpdateFuLiaoQuantity}/>
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.unit',
                    defaultMessage: '计量单位'
                }),
                dataIndex: 'unit'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.minQty',
                    defaultMessage: '最小包装数'
                }),
                dataIndex: 'minQty'
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'newPanel.details.materialFee',
                    defaultMessage: '辅料金额'
                }),
                dataIndex: 'materialFee',
                render: text => formatAmount(text)
            },
        ];
        const vehicleColumns = [
            {
                title: formatMessage({
                    id: 'newPanel.vehicle.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin'
            },
            {
                title: formatMessage({
                    id: 'newPanel.vehicle.country',
                    defaultMessage: '国家'
                }),
                dataIndex: 'country',
            },
            {
                title: formatMessage({
                    id: 'newPanel.vehicle.engineCode',
                    defaultMessage: '发动机号'
                }),
                dataIndex: 'engineCode',
            },
            {
                title: formatMessage({
                    id: 'newPanel.vehicle.transmissionSn',
                    defaultMessage: '变速箱号'
                }),
                dataIndex: 'transmissionSn',
            },
            {
                title: formatMessage({
                    id: 'newPanel.vehicle.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
            },
        ];
        return (
            <div className={styles.detail}>
                <Spin spinning={loading || this.state.loading}>
                    <Form className="form-standard">
                        <Card
                            title={formatMessage({
                                id: 'add.card.title',
                                defaultMessage: '技术升级信息'
                            })}>
                            <div className="form-standard">
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.code',
                                            defaultMessage: '技术升级编号'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                            {this.props.id
                                                ? data.code
                                                : <Input placeholder={formatMessage({
                                                    id: 'newPanel.form.notGenerate',
                                                    defaultMessage: '尚未生成'
                                                })}
                                                disabled />}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.serviceName',
                                            defaultMessage: '技术升级主题'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.serviceName && this.state.isValidate ? 'error' : null} required>
                                            <TextInput
                                                name="serviceName"
                                                value={data.serviceName}
                                                onBlur={this.handleFilterChange}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.brandCode',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.brandId && this.state.isValidate ? 'error' : null} required>
                                            <WrappedSelect
                                                allowClear
                                                name="brandId"
                                                value={data.brandId}
                                                options={initEnumData.brands}
                                                onChange={this.handleFilterChange}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.dealerCode',
                                            defaultMessage: '总代'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.dealerId && this.state.isValidate ? 'error' : null} required>
                                            {initEnumData.isDealerUser && initEnumData.enterprise
                                                ? initEnumData.enterprise.dealerId
                                                    ? `${initEnumData.enterprise.dealerCode}(${initEnumData.enterprise.dealerName})`
                                                    : ''
                                                : <DealerSelectPanel
                                                    value={dealerInfo}
                                                    onSelect={this.onSelectDealer} />}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.content',
                                            defaultMessage: '主要内容'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.content && this.state.isValidate ? 'error' : null} required>
                                            <TextInput
                                                name="content"
                                                value={data.content}
                                                onBlur={this.handleFilterChange}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.vehicleCategory',
                                            defaultMessage: '车辆类别'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.vehicleCategory && this.state.isValidate ? 'error' : null} required>
                                            <WrappedSelect
                                                allowClear
                                                name="vehicleCategory"
                                                value={data.vehicleCategory}
                                                options={vehicleCategoryList}
                                                onChange={this.handleFilterChange}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.checkLabor',
                                            defaultMessage: '检查工时'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                            <InputAmount
                                                name="checkLabor"
                                                value={data.checkLabor}
                                                onBlur={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.checkChangeLabor',
                                            defaultMessage: '检查工时+更换工时'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                            <InputAmount
                                                name="checkChangeLabor"
                                                value={data.checkChangeLabor}
                                                onBlur={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS_L.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.checkChangeAssistLabor',
                                            defaultMessage: '检查工时+更换工时+辅助工时'
                                        })}
                                        {...FORM_OPTIONS_L.item}>
                                            <InputAmount
                                                name="checkChangeAssistLabor"
                                                value={data.checkChangeAssistLabor}
                                                onBlur={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.isClaimPart',
                                            defaultMessage: '是否索赔备件'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={data.isClaimPart === undefined && this.state.isValidate ? 'error' : null} required>
                                            <WrappedSelect
                                                allowClear
                                                name="isClaimPart"
                                                value={data.isClaimPart}
                                                options={isYesNoList}
                                                onChange={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.isClaimAssist',
                                            defaultMessage: '是否索赔辅料'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={data.isClaimAssist === undefined && this.state.isValidate ? 'error' : null} required>
                                            <WrappedSelect
                                                allowClear
                                                name="isClaimAssist"
                                                value={data.isClaimAssist}
                                                options={isYesNoList}
                                                onChange={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.technologyActivityDate',
                                            defaultMessage: '技术升级截止日期'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.technologyActivityDate && this.state.isValidate ? 'error' : null} required>
                                            <DateRangePicker
                                                name="technologyActivityDate"
                                                value={data.technologyActivityDate}
                                                onChange={this.dateHandleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.supplierCode',
                                            defaultMessage: '供应商编号'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.supplierId && this.state.isValidate ? 'error' : null} required>
                                            <SearchSelect
                                                name="supplierCode"
                                                value={supplierInfo}
                                                labelMap={d => {
                                                    if(d.id === undefined) return '';
                                                    if(d) return `${d.code}(${d.name})`;
                                                    return '';
                                                }}
                                                onSearch={this.onSearchSupplierCode}
                                                onSelect={this.onSelectShowSupplierCode}
                                                onClickSearchBtn={this.showSupplierCode}/>
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.dutyUnitCode',
                                            defaultMessage: '主要责任部门'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        helpShow validateStatus={!data.dutyUnitId && this.state.isValidate ? 'error' : null} required>
                                            <SearchSelect
                                                name="dutyUnitCode"
                                                value={dutyUnitInfo}
                                                labelMap={d => {
                                                    if(d.id === undefined) return '';
                                                    if(d) return `${d.code}(${d.name})`;
                                                    return '';
                                                }}
                                                onSearch={this.onSearchDutyUnitCode}
                                                onSelect={this.onSelectShowDutyUnitCode}
                                                onClickSearchBtn={this.showDutyUnitCode}/>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col {...FORM_ROW_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'newPanel.form.remark',
                                            defaultMessage: '备注'
                                        })}
                                        {...FORM_ROW_OPTIONS.item}>
                                            <TextInput
                                                name="remark"
                                                type="textarea"
                                                value={data.remark}
                                                onBlur={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                </Row>
                            </div>
                        </Card>
                        {!this.props.id &&
                    <Card
                        title={formatMessage({
                            id: 'vehicle.form.title',
                            defaultMessage: '技术升级指定车辆查询'
                        })}
                        bordered={false}>
                        <Row>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'vehicle.form.productCategoryId',
                                        defaultMessage: '车型编号'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    <SearchInput
                                        value={data.productCategoryId ? `${data.productCategoryCode}(${data.productCategoryName})` : null}
                                        onClickSearchBtn={() => this.setState({showProductCategory: true})}/>
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'vehicle.form.vinFW',
                                        defaultMessage: 'VIN码范围'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    <WrappedInputVIN
                                        style={widths}
                                        name={['beginVIN', 'endVIN']}
                                        onBlur={this.handleFilterChange}
                                        value={[data.beginVIN, data.endVIN]}/>
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={formatMessage({
                                        id: 'vehicle.form.rolloutDate',
                                        defaultMessage: '下线时间'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    <DateRangePicker
                                        name="rolloutDate"
                                        value={data.rolloutDate}
                                        onChange={this.rolloutHandleFilterChange} />
                                </FormItem>
                            </Col>
                            <div className={styles.textAlign}>
                                <Button
                                    type="primary"
                                    loading={this.state.isFetching}
                                    onClick={this.onClickSearchBtn}>
                                    {formatMessage({
                                        id: 'vehicle.btn.query',
                                        defaultMessage: '查询'
                                    })}
                                </Button>
                                <Button key="clear" onClick={this.onClickReset}>{formatMessage({
                                    id: 'vehicle.btn.reset',
                                    defaultMessage: '重置'
                                })}</Button>
                            </div>
                        </Row>
                        <Row>
                            <Table
                                className="white-space-nowrap"
                                columns={vehicleColumns}
                                dataSource={vehicleData.content}
                                rowKey="id"
                                pagination={pagination}
                                loading={this.state.isFetching}
                                locale={{
                                    emptyText: this.state.message ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                                }}
                                {...TABLE}/>
                        </Row>
                    </Card>}
                        <Card
                            title={formatMessage({
                                id: 'newPanel.details.title',
                                defaultMessage: '技术升级维修材料清单'
                            })}
                            bordered={false}
                            extra={<Button
                                size="small"
                                onClick={this.onClicNewPart}>
                                {formatMessage({
                                    id: 'newPanel.operation.add',
                                    defaultMessage: '新增'
                                })}
                            </Button>}>
                            <Table
                                className="white-space-nowrap"
                                rowKey="usedPartId"
                                columns={columns}
                                pagination={false}
                                dataSource={data.details}
                                {...TABLE} />
                        </Card>
                        <Card
                            title={formatMessage({
                                id: 'newPanel.technologyActivityMaterial.title',
                                defaultMessage: '技术升级维修辅料清单'
                            })}
                            bordered={false}
                            extra={<Button
                                size="small"
                                onClick={this.onClicfuliNewPart}>
                                {formatMessage({
                                    id: 'newPanel.operation.add',
                                    defaultMessage: '新增'
                                })}
                            </Button>}>
                            <Table
                                className="white-space-nowrap"
                                rowKey="usedPartId"
                                columns={fuliaoColumns}
                                pagination={false}
                                dataSource={data.technologyActivityMaterial}
                                {...TABLE} />
                        </Card>
                        <Card
                            title={formatMessage({
                                id: 'newPanel.attachments.title',
                                defaultMessage: '附件清单'
                            })}
                            bordered={false}>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FileUpload
                                        onChange={this.onChangeUpload}
                                        onRemove={this.removeFilePath}
                                        fileList={data.attachments || []}/>
                                </Col>
                            </Row>
                        </Card>
                        <Card className={styles.optionBtn}>
                            <Row>
                                <Col className="col-align-right">
                                    <Button
                                        key="audit"
                                        loading={this.state.loading}
                                        onClick={this.onSubmit}
                                        className={styles.btnMargin}
                                        type="primary">
                                        {formatMessage({
                                            id: 'newPanel.btn.submit',
                                            defaultMessage: '提交'
                                        })}
                                    </Button>
                                </Col>
                            </Row>
                        </Card>
                    </Form>
                    {
                        this.state.showSupplierCodePanl &&
                    <DutyUnitSelectPanel
                        selectKey={data.supplierId}
                        type={dutyUnitType.索赔供应商}
                        onSelect={this.onSelectShowSupplierCode}
                        onCancel={() => this.setState({showSupplierCodePanl: false})}/>
                    }
                    {
                        this.state.showDutyUnitCodePanl &&
                    <DutyUnitSelectPanel
                        selectKey={data.dutyUnitId}
                        type={dutyUnitType.责任单位}
                        onSelect={this.onSelectShowDutyUnitCode}
                        onCancel={() => this.setState({showDutyUnitCodePanl: false})}/>
                    }
                    {
                        this.state.showSelectPartPanel &&
                    <PartSelectPanel
                        dealerId={did}
                        brandId={data.brandId}
                        onSelect={this.onSelectParts}
                        currentSelectRowkeys={currentSelectRowkeys}
                        onCancel={() => this.setState({showSelectPartPanel: false})}/>
                    }
                    {
                        this.state.showSelectNewPanel &&
                    <PartSelectPanel
                        type="radio"
                        dealerId={did}
                        brandId={data.brandId}
                        onSelect={this.onSelectNews}
                        currentSelectRowkeys={currentSelectRowkeys}
                        onCancel={() => this.setState({showSelectNewPanel: false})} />
                    }
                    {
                        this.state.showSelectFuLiaoNewPanel &&
                    <FuLiaoPartSelectPanel
                        dealerId={did}
                        brandId={data.brandId}
                        onSelect={this.onSelectFuLiaoParts}
                        currentSelectRowkeys={currentFuLiaoSelectRowkeys}
                        onCancel={() => this.setState({showSelectFuLiaoNewPanel: false})}/>
                    }
                    {
                        this.state.showProductCategory &&
                    <ProductCategoryPanel
                        onSelect={this.onSelectProduct}
                        currentSelectRowkeys={data.productCategoryId}
                        onCancel={() => this.setState({showProductCategory: false})} />
                    }
                </Spin>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={onCancel}>{formatMessage({
                            id: 'newPanel.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

IndexPanel.propTypes = {
    initEnumData: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    history: PropTypes.object,
    successReturn: PropTypes.func
};
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'init']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? ListTypeCL(initData.brands) : [];
        return {
            brands, // 品牌
            enterprise: initData.enterprise,
            isDealerUser: initData.isDealerUser,
            isFetching: initData.isFetching
        };
    }
);
const getPermission = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    permissions: getPermission(state),
    initEnumData: getinitEnumData(state),
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching'])
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onSubmit: (data, dealerId) => dispatch(onSubmit(data, dealerId)),
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(IndexPanel));
